Tour 2 - AMReminder

In this Tour we will recreate the AMReminder example. It shows many of AppMaker's UI elements, how to set Styles, and how to use Commands.

Editing Menus
Copying Items
Editing Windows
Editing Dialogs
Creating Commands
Simulating Windows and Dialogs
Generating Code and Building an Application

Open the AMReminder document from the Examples folder. Move its window off to the side of the screen for later use
Choose New from the File menu. AppMaker displays an Untitled window.
Choose Save or Save As. In the standard file dialog, first create a new folder named Tour2, then name the file as Tour.

Editing Menus

In the Tour window, twist Menu Bars, then double-click Main Menu to open AppMaker's menu editor. AppMaker displays a window for editing menus.
Choose Create Menu from the Edit menu. AppMaker displays an edit field for entering the title of the new menu.
Type Remind, then click outside the edit field to stop editing the title.
Click the newly created Remind title to select it and to drop down its (empty) menu.
Choose Create Menu Item. Type Cancel Reminder, then click below the new item to stop editing it and to deselect it while leaving the Remind menu dropped down.
Press cmd-K to create a second menu item. Type Hide Reminders.
Close the menu window.

Copying Items

Drag "Images" from the AMReminder window to the Tour window. When you drag from one file to another, AppMaker makes copies of the dragged items. Within a file, you can press the Option key to copy items. Otherwise, AppMaker moves rather than copies items.

Editing Windows

For the remainder of this Quick Tour, we'll use AMReminder as a guide to creating Tour's windows, dialogs, and other items.
In the AMReminder window, twist open the Windows category, then double-click MainWindow. Drag Main Window to the side of the screen so you can see it while creating Main Window in Tour.

In the Tour window, twist open the Windows category, then double-click MainWindow.

Choose Tools from the View menu, then select the ImageItem tool.
In MainWindow, click near the upper left corner. AppMaker displays an ImageItem Info dialog. Type Logo as the title, choose Color Logo for itsGraphic, then click OK.

In the Tools window, select the Static Text tool.
In MainWindow click to the right of the logo, then type 1998.
Choose Coordinates from the View window to display the Coordinates floating window. Change the width from 100 to 50 then close the Coordinates window.

Select the Static Text tool again. (The Tools window is "spring-loaded" so that it reverts to the arrow tool after creating an item.) Click below the logo and type List of Reminders:. Drag the label's size box to fit the text.

Select the List tool.
Click slightly below the "List of" label.
The new List has a resize box on its lower right corner. Drag it to resize the list nearer the right edge of the window.
Double-click the list to display the List Info dialog. Type Reminders as the title, then click OK.

Select the Button tool.
Click below the List to create the Delete button. After typing the "Delete" title, click outside the button to stop editing the title.
Press the Option key, then drag the Delete button to the right to make a copy as the Edit button. Click the copy to select it, then click it again to start editing its title. Type Edit....
Option-drag the Edit button to create the Add button.
Double-click the Add button (or choose Button Info from the View menu). In the Button Info dialog, click the "is Default" checkbox. Type "Add...' as the title, then click OK.

Creating Styles

Close the Tools window.
Click the Tour window to select it.
Choose Add Categories from the Edit menu. In the Add Categories dialog, double-click Drawing Style and double-click Text Style, then click Done.

Double-click Text Styles. AppMaker displays an empty window of Text Styles.
Choose Create Text Style. AppMaker displays a Text Style Info dialog.
Type Geneva 14 Italic as the Title. Choose Geneva from the Font popup, type 14 in the size field, choose Italic from the Style popup, then click OK.

As a shortcut for creating the other Text Styles, click in the AMReminder window to select it. Twist open Text Styles, then select New York 12 and shift-select the remaining Text Styles (other than Geneva 14 Italic).
Press the Option key and drag the four text styles to the Text Styles window to copy them to the Tour file.
Close the Text Styles window, then choose Save from the File menu. (It's always a good idea to save your work frequently.)

Double-click Drawing Styles to open a new window.
Press cmd-K to Create a new Drawing Style. In the info dialog, type Blue border as the Title, choose Blue from the Line Color popup, then click OK.
Close the Drawing Style window.

Applying Styles

Choose Info from the View menu to open a floating window for selecting styles and other information.
Click MainWindow to select it, then select the "1998" label.
Choose "Geneva 14 Italic" from Info's Text Style popup.

Click the "List of Reminders" label and shift-click the reminders List to select both items.
Choose "New York 12" from Info's Text Style popup.

Setting "Stickiness"

Stickiness is a property that determines what happens to a window item when its window is resized. Three possibilities are that the item stays where it is, that it moves, or that it resizes. You can set the vertical stickiness and the horizontal stickiness separately.

Select the Edit and Add buttons. From the Info floater's vStickiness popup, choose "Moves vertically." From the hStickiness popup, choose "Moves horizontally."
Select the Delete button.
From the Info floater's vStickiness popup, choose "Moves vertically." From the hStickiness popup, choose "Fixed position & size."
Select the Reminders list.
From the Info floater's vStickiness popup, choose "Resizes height." From the hStickiness popup, choose "Resizes width."

Close the MainWindow and Save your work.
Close AMReminder's Main Window

Editing Dialogs

Open AMReminder's Add dialog, then drag it to the side of the screen to serve as a model for creating Tour's Add dialog.

In the Tour window, select the Dialogs category.
Press cmd-K to Create a new Dialog.
Type Add as its Title, then click OK.
In the Tour window, double-click the Add dialog to open a view editor window for the new Add dialog.

Click Tour's (empty) Add dialog to select it, then choose "Gray background" from Info's Drawing Style popup.
Open the Tools window and select the ImageItem tool.
Click near the upper left of the Add dialog to create an Image Item. Type Logo as the Title, choose Color Logo for itsGraphic, choose "Scale, maintain aspect" as the scaling, then click OK.
Resize the picture to about half its original size.

Select the Static Text tool.
In the Add dialog, click below the logo, then type Add Reminder for: as the label.
Choose "Application Underline Blue" from Info's Text Style popup.
Resize the item to fit the text.
Similarly, create the "Date:" label.

Select the Edit Text tool.
Click to the right of the Date label to create a Date control.
Press cmd-I to display the Edit Text Info dialog. Leave the Title blank. For Flavor, choose clock, then choose 12/25/99. Click OK. Resize the Date control to fit.
In the Info floater, type Date as the name. This name will be used in generated code.
Select the Date label and the Date field. Deselect the Add dialog if it is still selected.
Option-drag the two items to the right to create two new items.
Select the new Date label. Change its text to Time:.
Double-click the new edit field. Change its title to Time, then change its clockFlavor to 12:34. In the Info floater, type Time as the name.

Option-drag the AddReminder label down to create a new label. Change its text to Message:.
Select the Edit Text tool then click to the right of the Message label to create a Message edit field. Resize it as shown in the AMReminder file's Add dialog. In the Info floater, change its name to Message.

As a shortcut for creating the rest of the Add dialog, use Drag&Drop to copy items from the AMReminder file to the Tour file:
- In the Tour window, twist open the Add dialog to see an outline view of the dialog.
- In the AMReminder window, twist open the Add dialog, then select the items from WhenReminding through SoundPopup.
- Drag them to the Tour window after the second Message item.
- Drag the OK and Cancel buttons from the AMReminder window to the Tour window. After dropping them into the Tour window, select the two buttons and drag them to be the first items in the dialog. For some development environments the OK and Cancel buttons should be the first two items of a dialog.

Close the Add dialog and Save your work.

Creating Commands

In the Tour window, select Commands.
Choose Create Command (or press cmd-K).
In the Command Info Dialog, type AddReminder as the Title, choose Invoke Dialog from the Action popup, then choose the Add dialog from the next popup.

As a shortcut, option-drag the EditReminder and DeleteReminder commands from the AMReminder window to the Tour window.
Double-click the new EditReminder command.
In the Command Info dialog, make sure that the action is to invoke the Add dialog, not the About dialog. In the AMReminder file, the command points to the first dialog, i.e. the Add dialog. In the Tour file the first dialog is the About dialog.

We won't use the AMReminder file anymore, so Revert to discard any accidental changes to the example file, then Close it.

Using Commands

Double-click the MainWindow to open a view editor.
Double-click the Add button to open up a Button Info dialog. (Alternatively, select the button, then choose Button Info from the View menu.)
Choose AddReminder in the Command popup, then click OK.
Similarly, choose EditReminder and DeleteReminder as the commands for the Edit and Delete buttons, respectively.

Save your work.

Simulating Windows and Dialogs

While the MainWindow is still displayed in the view editor, choose Simulate from the Options menu. AppMaker displays a new MainWindow.
Drag the new window to show that it is separate from the view editor's window.
Click the Add button. AppMaker now simulates the Add button, interprets its command to invoke the Add dialog, and therefore simulates the Add dialog.
Try the simulated Add dialog, then click OK or Cancel to return to the simulated MainWindow.
Click its close box to end the MainWindow simulation.

Generating Code and Building an Application

In the Tour window, twist Applications, then double-click YourApp.
Type Tour as the Title then click OK.
In the File menu, choose Language, then select a Language file.

In the File menu, choose Generate. After AppMaker is finished generating, click Done, then Quit AppMaker.
In the Finder, navigate to the Projects folder for the language you generated, e.g. Projects: CodeWarrior Pro 3: PowerPlant. Drag the YourApp.u project file and the resource file to your Tour2 folder.

Rename the copied YourApp.u project file to Tour.u. (For PowerPlant the conventional extension is option-m but that character doesn't display properly in most browsers. For Symantec the conventional extension is option-p.)
Running your development environment, e.g. Metrowerks or Symantec, open the Tour.u project file. Add the generated source and resource files.
In the project Settings dialog set the targets of the linked application to TourPPC and Tour68K. Choose the Make command, then wait for your compiler to build the Tour application.